Electron 入门实例

快速入门

简介

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用，可以看做是专注于桌面应用而不是 Web 服务器的 io.js 的变体。

Electron 使用 Web 页面作为它的 GUI，所以可以看成是一个被 JavaScript 控制的、精简版 Chromium 浏览器。

Atom文本编辑器即是用该工具开发。

在该项目之前，有个类似的工具NW.js，其实 Github 高层当时考查过 NW.js，希望基于它来开发 Atom，但由于下面的原因放弃了。然后把 NW.js 的第二作者挖过去开发了 Electron。

Atom & NW.js的区别

主进程

主进程是运行package.json里的main脚本的进程，在主进程运行的脚本可以以创建 Web 页面的形式展示 GUI。

渲染进程

由于 Electron 使用 Chromium 来展示页面，每个页面运行自己的进程，这些进程称为渲染进程。

一般浏览器运行在沙盒环境下，即不允许访问原生资源，比如对硬盘的写入操作。然而，通过内置的 io.js 这个后端语言可以访问操作系统，实现桌面应用应有的操作。

主进程和渲染进程的区别

主进程使用BrowserWindow的实例创建视图，每个 BW 实例都在自己的渲染进程里运行着一个网页，当实例被销毁，而渲染进程也被终止。

主进程管理所有页面和与之对应的渲染进程。如果想在网页使用 GUI 操作，对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

主进程与渲染进程之间使用 ipc 模块进行通信。

应用实例

在应用的根目录下有三个文件：

package.json
main.js
index.html

Electron 的入口文件是 JavaScript，即上面的main.js；而 NW.js 则是以 HTML 文件为入口。

//package.json
{
  "name": "myApp",
  "version": "0.0.1",
  "main": "main.js"
}

若main字段没有package.json中声明，则 Electron 会优先加载根目录下的index.js。

main.js用于创建窗口和处理系统时间，示例如下：

var app = require('app'); // 控制应用生命周期的模块
var BrowserWindow = require('browser-window'); // 创建原生浏览器窗口的模块

// 给服务器发送异常报告
require('crash-reporter').start();

// 保持一个对于window对象的全局引用
var mainWindow = null;

// 当所有窗口被关闭了，退出
app.on('window-all-closed', function(){
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当Electron完成了初始化且准备创建浏览器窗口的时候调用该方法
app.on('ready', function(){
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 720
  });
  mainWindow.loadUrl('file://' + __dirname + '/index.html');
  mainWindow.openDevTools(); // 打开开发者模式
  mainWindow.on('closed', function(){
    mainWindow = null;
  });
});

index.html如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Hello Electron</title>
  </head>
  <body>
    <h1>Electron Example</h1>
    <p>We are using io.js <script>document.write(process.version)</script> and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

运行应用

全局安装electron-prebuild: npm install -g electron-prebuilt，然后运行electron .